<template>
  <div class="footer-right">
    <cardTitle text="联发运可视化"/>
    <div class="node-list">
      <div class="node-bg"></div>
      <div v-for="(item,i) in 8" :key="i" :class="['node-item', `node-item-${i}`]">
        <div class="left">
          <div class="left-1">0{{ i + 1 }}</div>
          <div class="left-2">2025-06-20</div>
          <div class="left-3">10:22</div>
        </div>
        <div class="right">
          <div class="right-1">创建订单</div>
          <div class="right-2">平台操作人</div>
          <div class="right-3">平台操作人:福州朝畅；</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cardTitle from '../cardTitle.vue'

export default {
  name: "footerRight",
  components: {cardTitle},
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>
@import "../../scss/common.scss";

.footer-right {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #0770b0;
  display: flex;
  flex-direction: column;

  .node-list {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    .node-bg {
      height: px-to-rem(90px);
      background: url("../../images/eight.png") no-repeat;
      background-size: 100% 100%;
    }

    .node-item {
      width: px-to-rem(188px);
      height: px-to-rem(69px);
      position: absolute;
      display: flex;
      padding-top: px-to-rem(4px);

      .left {
        width: px-to-rem(62px);
        text-align: right;
        padding-right: px-to-rem(4px);
        padding-top: px-to-rem(4px);

        .left-1 {
          font-family: DOUYINSANSBOLD-GB;
          font-style: italic;
          font-size: px-to-rem(14px);
          color: rgba(255, 255, 255, 0.9);
        }

        .left-2 {
          font-family: MicrosoftYaHei;
          font-size: 10px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          line-height: 18px;
          color: #00b6ff;
        }

        .left-3 {
          font-family: MicrosoftYaHei;
          font-size: 10px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          line-height: 18px;
          letter-spacing: 0px;
          color: #00b6ff;
        }
      }

      .right {
        background-image: linear-gradient(90deg,
          rgba(0, 182, 255, .15) 0%,
          rgba(0, 182, 255, 0.1) 100%);
        border-left: 2px solid rgba(49, 178, 234, 1);
        padding-left: px-to-rem(10px);
        padding-top: px-to-rem(4px);

        .right-1 {
          font-family: MicrosoftYaHei-Bold;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.9);
        }

        .right-2 {
          font-family: MicrosoftYaHei;
          font-size: 10px;
          color: rgba(255, 255, 255, 0.6);
          margin: px-to-rem(3px) 0;
        }

        .right-3 {
          font-family: MicrosoftYaHei;
          font-size: 10px;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }

    $node-margin: px-to-rem(10px);

    .node-item-0 {
      left: 0;
      bottom: $node-margin;
    }

    .node-item-1 {
      left: 10%;
      top: $node-margin;
    }

    .node-item-2 {
      left: 23%;
      bottom: $node-margin;
    }

    .node-item-3 {
      left: 34%;
      top: $node-margin;
    }

    .node-item-4 {
      left: 48%;
      bottom: $node-margin;
    }

    .node-item-5 {
      left: 57%;
      top: $node-margin;
    }

    .node-item-6 {
      left: 73%;
      bottom: $node-margin;
    }

    .node-item-7 {
      right: 0;
      top: $node-margin;
    }
  }
}
</style>